<template>
	<view class="detail-pops">
		<!-- 详情 -->
		<uni-popup @close="close" @open="open" ref="payPopup" type="bottom">
			<view class="pop-box">
				<uni-icons class="icons" type="closeempty" color="#000" size="30" @click="close"/>
				<view class="title" style="color: transparent;">000</view>
				<view class="money">
					￥{{showPrice}}
				</view>
				<view class="pay-function">
					<view class="pay-left">
						<image class="wx-icon" src="/static/wx.png" mode="widthFix"></image>
						<text>微信支付</text>
					</view>	
					<label class="radio"><radio value="r1" checked="true" /></label>
				</view>
				<view style="padding-bottom: 30rpx;">
					<view class="sure-bth" @click="open1">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {doPay} from "@/utils/payment.js"
	export default {
		name: "cos-pupop",
		data() {
			return {
                  vipList:[
					  {name:"普通会员",id:1},
					  {name:"高级会员",id:2},
					  {name:"特级会员",id:3},
				  ],
				  showPrice:0,
			};
		},
		methods: {
			 close(){
				 this.$refs.payPopup.close()
			 },
             async open(){
				 if(this.$store.state.userInfo.memberStatus){
					 this.$refs.payPopup.close()
					 uni.navigateTo({
					 	url:"/pages/myBack/myBack"
					 })
				 }
				 const {data:res} = await this.$api('/app/getAgreement','GET',{code:"member_price"})
				 // console.log(res)
				 this.showPrice = Number(res.data)
				 this.$refs.payPopup.open()
             },
			async open1(){
				const {data:res} = await this.$api("/app/order/generate","POST",{payType:"wx"})
				console.log(res)
				let payInfo = res.data.payResult
				payInfo.package=res.data.payResult.packageValue
				delete payInfo.packageValue
				if(res.code==200){
				  const callback = await doPay(payInfo)
				  if(callback==200){
					  this.$refs.payPopup.close()
					  let setInfo  = this.$store.state.userInfo
					  setInfo.memberStatus = 1
					  this.$store.dispatch('setUserData',setInfo)
					  uni.navigateTo({
					  	url:"/pages/html2pdf/html2pdf"
					  })
				  }
				}
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		width: 100vw;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 100rpx;
		.icons{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.title{
			width: 100vw;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(to bottom, rgba(82, 154, 238, 0.3) 20%, rgba(82, 154, 238, .1), rgba(82, 154, 238, 0.01));
		}
		.v-p{
			width: calc(100% - 90rpx);
			margin: 30rpx auto;
			border-radius: 60rpx;
			background-color: #F8F8F8;
			color:#B5B6B5;
			font-weight: bold;
			text-align: center;
			padding:30rpx 0;
		}
		.clicked{
			background-color: #C4DEFB;
			border:1rpx solid #529AEE;
			color: #529AEE;
		}
		.sure-bth{
			width: calc(100% - 90rpx);
			margin: 30rpx auto;
			border-radius: 60rpx;
			background-color: #529AEE;
			color: #fff;
			font-weight: bold;
			text-align: center;
			padding:30rpx 0;
		}
	    .money{
			width: calc(100% - 60rpx);
			margin: 0 auto;
			height: 200rpx;
			line-height: 200rpx;
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
			color: #E11717;
			background-color: #F8F8F8;
			border-radius: 20rpx;
		}
		.pay-function{
			width: calc(100% - 60rpx);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;
			border-bottom: 1rpx solid #F8F8F8;
			padding-bottom: 40rpx;
			.pay-left{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.wx-icon{
					width: 40rpx;
				}
			}
		}
		
	}
</style>